import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import { IndexItem } from './indexItem';
import { Center } from '../center/user';
import { Cart } from '../cart/cart';
import './index.scss'
import '../common/header.scss';

export default class Index extends Taro.Component {
  state = {
    current: 0
  }
  constructor() {
    super(...arguments)
  }
  
  handleClick (current) {
    this.setState({
      current
    });
  }

  render() {
    const { current } = this.state;
    return (
      <View>
        {
          current === 0
            ?
            <IndexItem />
            :
            current === 1
              ?
              <Cart></Cart>
              :
              current === 2
                ?
                <Center></Center>
                : ''
        }
        <AtTabBar
          fixed
          selectedColor='#F2CA26'
          iconSize={28}
          fontSize={10}
          tabList={[
            { title: '商城', iconType: 'shangcheng', iconPrefixClass: 'icon' },
            { title: '购物车', iconType: 'shopping-cart' },
            { title: '我的', iconType: 'user' }
          ]}
          onClick={this.handleClick.bind(this)}
          current={current}
        />
      </View>
    )
  }
}
